﻿Ext.define('SmartClient.view.AddedProductsView',
   {
      extend: 'Ext.window.Window',
      controller: 'SmartClient.controller.AddedProductsController',

      id: 'addedProductsWindow',
      titleAlign: 'center',
      closable: false,
      resizable: false,
      draggable: false,
      hidden: true,
      modal: true,
      y: 0,
      width: 100,

      constructor: function(args)
      {
         this.items[0].store = args.store;
         this.orderId = args.orderId;
         this.title = args.orderId ? 'Added products [order edit mode]' : 'Added products';
         this.callParent(arguments);
      },

      items:
         [
            {
               xtype: 'gridpanel',
               id: 'addedProductsGrid',
               sortableColumns: false,
               enableColumnHide: false,

               features: { ftype: 'summary' },

               plugins:
               [
                  {
                     ptype: 'cellediting',
                     clicksToEdit: 2
                  }
               ],

               columns:
                  [
                     {
                        xtype: 'rownumberer',
                        align: 'center',
                        width: 25
                     },
                     {
                        text: 'Product',
                        dataIndex: 'image',
                        width: 160,
                        renderer: function (value, p, r)
                        {
                           return '<img class="added-product-image" src="' + value + '" />' + '<br />'
                              + '<div class="added-product-name">' + r.data['name'] + '</div>';
                        }
                     },
                     {
                        text: 'Price',
                        dataIndex: 'price',
                        width: 130,
                        renderer: function (value)
                        {
                           return '$' + value;
                        }
                     },
                     {
                        text: 'Amount',
                        dataIndex: 'orderedAmount',
                        width: 70,
                        editor:
                           {
                              xtype: 'numberfield',
                              allowBlank: false
                           }
                     },
                     {
                        text: 'Total',
                        dataIndex: 'price',
                        width: 130,
                        renderer: function (value, p, r)
                        {
                           return '$' + (value * r.data['orderedAmount']);
                        },
                        summaryType: 'sum',
                        summaryRenderer: function (value, p, r)
                        {
                           var summ = 0;
                           this.store.each(function (model)
                           {
                              summ += model.data['price'] * model.data['orderedAmount'];
                           });
                           return '<b>Total: ' + '<span id="total-price">$' + Ext.Number.toFixed(summ, 2) + '</span>' + '</b>';
                        }
                     },
                     {
                        text: '',
                        xtype: 'actioncolumn',
                        itemId: 'actionColumn',
                        width: 24,
                        items:
                           [
                              {
                                 tooltip: 'Remove',
                                 icon: 'images/Remove.png'
                              }
                           ]
                     }
                  ],

               dockedItems:
                  [
                     {
                        xtype: 'toolbar',
                        dock: 'bottom',
                        layout:
                           {
                              type: 'hbox',
                              pack: 'center'
                           },
                        items:
                           [
                               {
                                  xtype: 'button',
                                  itemId: 'confirmButton',
                                  text: 'Confirm',
                                  width: 100
                               },
                               {
                                  xtype: 'button',
                                  itemId: 'cancelButton',
                                  text: 'Cancel',
                                  width: 100
                               },
                               {
                                  xtype: 'button',
                                  itemId: 'addItemsButton',
                                  text: 'Add products',
                                  width: 100,
                                  hidden: true
                               }
                           ]
                     }
                  ]
            }
         ]
   });